import { useState } from "react";
import GpuCanvas from "../../components/GpuCanvas";
// @ts-ignore
import DatGui, { DatNumber } from "react-dat-gui";
export default function ImageBlur() {
  const appName = "ImageBlur";
  const [selectData, setSelectData] = useState({
    filterSize: 1,
    iterations: 1,
  });

  const onDataUpdate = (newData: any) => {
    setSelectData(newData);
  };
  return (
    <>
      <GpuCanvas app={appName} data={selectData} />
      <DatGui data={selectData} className="dat-gui" onUpdate={onDataUpdate}>
        <DatNumber
          path="filterSize"
          label="Filter Size"
          min={1}
          max={31}
          step={2}
        />
        <DatNumber
          path="iterations"
          label="Iterations"
          min={1}
          max={10}
          step={1}
        />
      </DatGui>
    </>
  );
}
